<template>
  <div class="user-management">
    <div class="wrapper" v-show="tableShow">
      <!-- 查询表单 -->
      <div class="ant-pro-table-search">
        <a-form v-bind="searchFormLayout">
          <a-row :gutter="16">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户名">
                <a-input v-model="queryParam.username" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="状态">
                <a-select
                  v-model="queryParam.status"
                  placeholder="请选择"
                  default-value="0"
                >
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="0">正常</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="昵称">
                  <a-input v-model="queryParam.realName" style="width: 100%" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="电话">
                  <a-input-number
                    v-model="queryParam.phone"
                    style="width: 100%"
                  />
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="8" :sm="24" class="table-page-search-wrapper">
              <div class="table-page-search-submitButtons">
                <a-button type="primary" @click="reloadTable">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetSearchForm"
                  >重置</a-button
                >
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? "收起" : "展开" }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- 表格区域 -->
      <a-card :bordered="false" :bodyStyle="{ padding: 0 }">
        <!-- 操作按钮区域 -->
        <div class="ant-pro-table-toolbar">
          <div class="ant-pro-table-toolbar-title">系统用户</div>
          <div class="ant-pro-table-toolbar-option">
            <a-button type="primary" icon="plus" @click="handleAdd()"
              >新建</a-button
            >
          </div>
        </div>

        <div class="ant-pro-table-wrapper">
          <a-alert :showIcon="true" style="margin-bottom: 16px">
            <template #message>
              <span style="margin-right: 12px"
                >已选择:
                <a style="font-weight: 600">{{ selectedRows.length }}</a></span
              >
              <a
                style="margin-left: 24px"
                v-show="selectedRows.length > 0"
                @click="onClearSelected"
                >清空</a
              >
            </template>
          </a-alert>

          <!--数据表格-->
          <a-table
            ref="table"
            size="middle"
            :rowKey="rowKey"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
            :alert="{ show: true, clear: true }"
            :rowSelection="{
              onChange: onSelectChange,
              selectedRowKeys: selectedRowKeys,
            }"
          >
            <!--数据表格-->
            <template #status-slot="text">
              <a-badge
                :status="text | statusTypeFilter"
                :text="text | statusFilter"
              />
            </template>
            <template #gender-slot="text">
              <span>{{ text | genderFilter }}</span>
            </template>
            <template #avatar-slot="text, record">
              <a-avatar
                shape="square"
                :src="record.avatar"
                icon="user"
                size="large"
                @click="beforeUpdateAvatar(record.avatar)"
              />
            </template>
            <template #action-slot="text, record">
              <a-dropdown>
                <a class="ant-dropdown-link" href="#">
                  操作
                </a>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>
                      <a @click="handleEdit(record)">编辑</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a @click="handleGrant(record)">授权</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a @click="changePass(record)">重置密码</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a-popconfirm
                        title="确认要删除吗？"
                        @confirm="() => handleDel(record, '/rapid/user/delete')"
                      >
                        <a href="javascript:;">删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </a-table>
        </div>
      </a-card>
    </div>

    <!--头像弹框-->
    <cropper-modal ref="avatarModal"></cropper-modal>

    <!--表单页面-->
    <a-card v-show="!tableShow" :bordered="false" :title="cardTitle">
      <form-page ref="formPage" @backToPage="backToPage"></form-page>
    </a-card>

    <!--用户授权-->
    <div v-if="scopeInited">
      <scope-modal ref="scopeModal"></scope-modal>
    </div>
  </div>
</template>

<script>
import { tablePageMixin } from "@/mixins/";
import CropperModal from "@/components/CropperModal";
import ScopeModal from "./ScopeModal";
import FormPage from "./sysUserForm";
import md5 from "js-md5";
const statusMap = {
  1: {
    status: "default",
    text: "关闭",
  },
  0: {
    status: "processing",
    text: "正常",
  },
};
const genderMap = {
  0: {
    status: "woman",
    text: "女",
  },
  1: {
    status: "man",
    text: "男",
  },
};
export default {
  components: { CropperModal, FormPage, ScopeModal },
  data() {
    return {
      // 表头
      columns: [
        {
          title: "用户名",
          dataIndex: "username",
          align: "center",
        },
        {
          title: "昵称",
          dataIndex: "realName",
          align: "center",
        },
        {
          title: "头像",
          dataIndex: "avatar",
          align: "center",
          scopedSlots: { customRender: "avatar-slot" },
        },
        {
          title: "性别",
          dataIndex: "gender",
          align: "center",
          scopedSlots: { customRender: "gender-slot" },
        },
        {
          title: "组织",
          dataIndex: "orgName",
          align: "center",
        },
        {
          title: "电话",
          dataIndex: "linkPhone",
          align: "center",
        },
        {
          title: "状态",
          dataIndex: "status",
          align: "center",
          width: "80px",
          scopedSlots: { customRender: "status-slot" },
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          align: "center",
          width: "150px",
          sorter: true,
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          width: "70px",
          scopedSlots: { customRender: "action-slot" },
        },
      ],
      //授权模块初始化标识
      scopeInited: false,
    };
  },
  mixins: [tablePageMixin],
  filters: {
    statusFilter(type) {
      return statusMap[type].text;
    },
    statusTypeFilter(type) {
      return statusMap[type].status;
    },
    genderFilter(type) {
      return genderMap[type].text;
    },
  },
  created() {
    this.getDataUrl = "/rapid/user/getPage";
    this.searchKey = "user";
  },
  methods: {
    // avatar
    beforeUpdateAvatar(avatar) {
      const _this = this;
      _this.$refs.avatarModal.edit(avatar);
    },
    // 授权
    handleGrant(record) {
      if (!this.scopeInited) {
        this.scopeInited = true;
      }
      this.$nextTick(function() {
        this.$refs.scopeModal.show(record);
      });
    },
    // 重置密码
    changePass(record) {
      const data = {
        ...record,
        password:md5('888888')
      }
      this.$http("/rapid/user/saveOrUpdate", data).then((res) => {
        if (res.code === 200) {
          console.log('11')
        } else {
          console.log('22')
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.user-management {
  .ant-pro-table-search {
    background-color: #fff;
    padding: 16px 24px 0;
    .table-page-search-wrapper {
      text-align: right;
      .table-page-search-submitButtons {
        padding-top: 3.5px;
        margin-bottom: 16px;
      }
    }
  }
  .ant-pro-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
  }
}
</style>
